//http://localhost:5000/threejs/examples/#webgl_multiple_scenes_comparison
import * as React from "react";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import styled from "styled-components";
import { initAxes } from "./mixins/viewAxes";
var container, camera, renderer, controls;
var sceneL, sceneR;

var sliderPos = window.innerWidth / 2;
var sliderMoved = false;

const Container = styled.div`
  position: absolute;
  width: 100%;
  height: 100%;
`;
const Slider = styled.div`
  position: absolute;
  cursor: ew-resize;

  width: 40px;
  height: 40px;
  background-color: #2196f3;
  opacity: 0.7;
  border-radius: 50%;

  top: calc(50% - 20px);
  left: calc(50% - 20px);
`;
type CounterState = {
  value: number;
  representation: number;
  coneResolution: number;
  // thisPointRenderer:any;
  // fullScreenRenderer: vtkFullScreenRenderWindow;
};
type CounterProps = {};

class AppAxesCube extends React.Component<CounterProps, CounterState> {
  state: CounterState = {
    value: 0,
    representation: 2,
    coneResolution: 6,
    // fullScreenRenderer: vtkFullScreenRenderWindow.newInstance(),
    // thisPointRenderer:null,
  };
  renderView = () => {
    renderer.setScissor(0, 0, sliderPos, window.innerHeight);
    renderer?.render(sceneL, camera);

    renderer.setScissor(sliderPos, 0, window.innerWidth, window.innerHeight);
    renderer?.render(sceneR, camera);
  };
  initComparisons = () => {
    var slider = document.getElementById("slider");

    var clicked = false;

    function slideReady() {
      clicked = true;
      controls.enabled = false;
    }
    function slideFinish() {
      clicked = false;
      controls.enabled = true;
    }

    function slideMove(e) {
      if (!clicked) return false;

      sliderMoved = true;

      sliderPos = e.pageX || e.touches[0].pageX;

      //prevent the slider from being positioned outside the window bounds
      if (sliderPos < 0) sliderPos = 0;
      if (sliderPos > window.innerWidth) sliderPos = window.innerWidth;

      slider!.style.left = sliderPos - slider!.offsetWidth / 2 + "px";
    }

    slider!.addEventListener("mousedown", slideReady);
    slider!.addEventListener("touchstart", slideReady);

    window.addEventListener("mouseup", slideFinish);
    window.addEventListener("touchend", slideFinish);

    window.addEventListener("mousemove", slideMove);
    window.addEventListener("touchmove", slideMove);
  };
  onWindowResize = () => {
    camera.aspect = container.clientWidth / container.clientHeight;
    camera.updateProjectionMatrix();

    renderer.setSize(container.clientWidth, container.clientHeight);

    if (!sliderMoved) sliderPos = window.innerWidth / 2;
  };
  initLights = () => {
    var light1 = new THREE.DirectionalLight();
    light1.position.set(20, 20, 20);
    sceneL.add(light1);
    sceneR.add(light1.clone());

    var light2 = new THREE.DirectionalLight();
    light2.position.set(-20, 20, 20);
    sceneL.add(light2);
    sceneR.add(light2.clone());
  };

  installMeshes = () => {
    var geoB = new THREE.BoxGeometry(2, 2, 2);
    var matB = new THREE.MeshStandardMaterial({ color: 0x0000ff });
    var meshB = new THREE.Mesh(geoB, matB);
    sceneL.add(meshB);

    var geoA = new THREE.IcosahedronGeometry(1, 0);
    var matA = new THREE.MeshStandardMaterial({ color: 0xff0000 });
    var meshA = new THREE.Mesh(geoA, matA);
    sceneR.add(meshA);
  };
  componentDidMount() {
    container = document.getElementById("container");
    sceneL = new THREE.Scene();
    sceneL.background = new THREE.Color(0xff00ff);

    sceneR = new THREE.Scene();
    sceneR.background = new THREE.Color(0x8fbcd4);

    camera = new THREE.PerspectiveCamera(
      35,
      container.clientWidth / container.clientHeight,
      0.1,
      10
    );
    camera.position.set(2, 4, 7);

    controls = new OrbitControls(camera, container);
    this.initLights();
    this.installMeshes();
 
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(container.clientWidth, container.clientHeight);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setScissorTest(true);

    container.appendChild(renderer.domElement);
    let me = this;
    renderer.setAnimationLoop(function () {
      me.renderView();
    });
    initAxes(document.querySelector("#arrowCanvas"));
  }
  render() {
    return (
      <div>
        <Container id="container">
          <Slider id="slider"></Slider>
        </Container>
        <canvas id="arrowCanvas"></canvas>
      </div>
    );
  }
}
export default AppAxesCube;
